<template>
  <view class="repair-detail">
    <view class="status-card">
      <view class="status">{{ repairStatus[repair.status] }}</view>
      <view class="time">{{ repair.createTime }}</view>
    </view>

    <view class="info-card">
      <view class="title">报修信息</view>
      <view class="info-item">
        <text class="label">报修类型</text>
        <text class="value">{{ repair.type }}</text>
      </view>
      <view class="info-item">
        <text class="label">问题描述</text>
        <text class="value">{{ repair.description }}</text>
      </view>
      <view class="info-item">
        <text class="label">联系人</text>
        <text class="value">{{ repair.contact }}</text>
      </view>
      <view class="info-item">
        <text class="label">联系电话</text>
        <text class="value">{{ repair.phone }}</text>
      </view>
    </view>

    <view class="progress-card">
      <view class="title">处理进度</view>
      <view class="progress-item" v-for="(item, index) in repair.progress" :key="index">
        <view class="dot"></view>
        <view class="content">
          <view class="progress-status">{{ item.status }}</view>
          <view class="progress-time">{{ item.time }}</view>
          <view class="progress-desc">{{ item.description }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      repair: {
        status: 1,
        createTime: '2025-03-13 10:30',
        type: '水管维修',
        description: '厨房水槽下方的水管出现渗漏现象',
        contact: '韩非',
        phone: '13800138000',
        progress: [
          {
            status: '提交报修',
            time: '2025-03-13 10:30',
            description: '用户提交维修申请'
          },
          {
            status: '受理工单',
            time: '2025-03-13 11:00',
            description: '维修部门已接收工单，正在安排维修人员'
          },
          {
            status: '维修处理',
            time: '2025-03-13 14:30',
            description: '维修人员李师傅正在进行维修处理'
          }
        ]
      },
      repairStatus: {
        0: '待处理',
        1: '处理中',
        2: '已完成',
        3: '已取消'
      }
    }
  },
  
  onLoad(options) {
    // 获取报修详情数据
    // this.getRepairDetail(options.id)
  },
  
  methods: {
    async getRepairDetail(id) {
      try {
        // 这里替换为实际的API调用
        const res = await this.$api.getRepairDetail(id)
        this.repair = res.data
      } catch (error) {
        uni.showToast({
          title: '获取详情失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-detail {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
  
  .status-card {
    background: #fff;
    padding: 30rpx;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    
    .status {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .time {
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }
  
  .info-card, .progress-card {
    background: #fff;
    padding: 30rpx;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    
    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
  }
  
  .info-item {
    display: flex;
    margin-bottom: 16rpx;
    
    .label {
      width: 140rpx;
      color: #666;
      font-size: 26rpx;
    }
    
    .value {
      flex: 1;
      color: #333;
      font-size: 26rpx;
    }
  }
  
  .progress-item {
    display: flex;
    margin-bottom: 30rpx;
    
    .dot {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background: #007AFF;
      margin-top: 6rpx;
      margin-right: 20rpx;
    }
    
    .content {
      flex: 1;
      
      .progress-status {
        font-size: 26rpx;
        color: #333;
        font-weight: bold;
      }
      
      .progress-time {
        font-size: 24rpx;
        color: #999;
        margin: 6rpx 0;
      }
      
      .progress-desc {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}
</style>
